<template>
  <div  style="width: 100%; height: 100%; overflow-x: hidden;overflow-y: auto;">
    <loading v-show="loading"></loading>

    <van-sticky   :offset-top="90">
      <van-row style="background-color: white;padding-bottom: 5px;padding-top: 5px;">
        <van-col span="3">序号</van-col>
        <van-col span="7">站名</van-col>
<!--        <van-col span="6">时间</van-col>-->
        <van-col span="7">降水量(毫米)</van-col>
        <van-col span="7">时段长</van-col>
      </van-row>
    </van-sticky>
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getData">

      <div v-for="(item,index) in tableData" :key="item.STCD">
        <van-row>
          <van-col span="3">{{index+1}}</van-col>
          <van-col span="7">{{item.STNM}}</van-col>
<!--          <van-col span="6">{{item.TM}}</van-col>-->
          <van-col span="7">{{item.DRP}}</van-col>
          <van-col span="7">{{item.INTV}}</van-col>
        </van-row>
        <van-divider />
      </div>


    </van-list>
    <div @click="onClickRight" style="position: fixed;width: 50px;height: 50px;bottom: 20px;left: 20px;z-index: 500;border-radius: 25px;background-color:#ff8827 ;">
      <van-image width="40" height="40" fit="fill" :src="imgUrl" style="margin: 5px;" />
    </div>
    <van-dialog v-model="show" title="筛选" show-cancel-button @confirm="confirm">
      <van-radio-group v-model="radio">
        <van-cell-group>
          <van-cell title=">100mm" clickable @click="radio = '1'">
            <template #right-icon>
              <van-radio name="1" />
            </template>
          </van-cell>
          <van-cell title="50~100mm" clickable @click="radio = '2'">
            <template #right-icon>
              <van-radio name="2" />
            </template>
          </van-cell>
          <van-cell title="30~50mm" clickable @click="radio = '3'">
            <template #right-icon>
              <van-radio name="3" />
            </template>
          </van-cell>
          <van-cell title="20~30mm" clickable @click="radio = '6'">
            <template #right-icon>
              <van-radio name="6" />
            </template>
          </van-cell>
          <van-cell title="10~20mm" clickable @click="radio = '7'">
            <template #right-icon>
              <van-radio name="7" />
            </template>
          </van-cell><van-cell title="0~10mm" clickable @click="radio = '8'">
            <template #right-icon>
              <van-radio name="8" />
            </template>
          </van-cell>
          <van-cell title="无降水" clickable @click="radio = '4'">
            <template #right-icon>
              <van-radio name="4" />
            </template>
          </van-cell>
          <van-cell title="全部" clickable @click="radio = '5'">
            <template #right-icon>
              <van-radio name="5" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
    </van-dialog>

  </div>

</template>

<script>
import API from "../../api/api_common";
import { Notify } from 'vant';
import Loading from './loading.vue'

  export default {
    name: "TableData",
      components: {
          Loading,
      },
    data() {
      return {
        imgUrl:require("../../../static/shaixuan.png"),
        finished: true,
        show: false,
        radio: '5',
        loading: false,
        tableData: []
      }
    },
    mounted() {
      this.getData("")
    },
    methods: {
      getData(where) {
          this.loading=true;
          where =where+ " and TM is not null ";
        API.getNowData({where:where}).then(res=>{
            let data=res.recordset;
            for (let i = 0; i <data.length ; i++) {
                let item=data[i].TM;
                if(item){
                    data[i].TM=item.replace("T"," ").substring(0,16)
                }
            }
            this.tableData=data;
            localStorage.setItem("data",JSON.stringify(data))
        }).catch(err=>{
            console.log(err);
            Notify({ type: 'danger', message: '获取数据失败' });
        }).finally(()=>{
            this.loading=false;
        })
      },
      onClickRight() {
        this.show = true;
      },
      confirm() {
        let where ='';
        switch (this.radio) {
           case "1":
               where="and DRP>100";
               break;
           case "2":
               where="and DRP between 50 and 100";
               break;
           case "3":
               where="and DRP between 30 and 50";
               break; case "6":
               where="and DRP between 20 and 30";
               break; case "7":
               where="and DRP between 10 and 20";
               break; case "8":
               where="and DRP between 0 and 10";
               break;
           case "4":
               where="and DRP=0";
               break;
           case "5":break;
            default:break;
        }
        this.getData(where)
      },

    }
  }
</script>

<style>
</style>
